<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column
        align="center"
        label="兑换用户"
        min-width="220"
        prop="nickName, phone"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{ scope.row.nickName }} - {{ scope.row.phone }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        label="商品名称"
        min-width="200"
        prop="name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="商品总价(积分)"
        prop="price"
        min-width="120"
      />
      <el-table-column
        align="center"
        label="库存"
        prop="stock"
        min-width="120"
      />
      <el-table-column
        align="center"
        label="兑换时间"
        prop="createTime"
        min-width="170"
      />
      <el-table-column
        align="center"
        label="取货时间"
        prop="pickupTime"
        min-width="170"
      />
      <el-table-column
        align="center"
        label="操作人"
        prop="consignorName"
        show-overflow-tooltip
        min-width="140"
      />
      <el-table-column
        align="center"
        label="订单状态"
        prop="status"
        min-width="100"
        fixed="right"
      >
        <template slot-scope="scope">
          {{ scope.row.status =='0'?'待取货': '已取货' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.status =='0'"
              v-preventReClick
              type="text"
              @click="fh(scope.row.id)"
            >发货</el-button>
            <span v-else>-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { integralOrder, integralDeliver } from '@/api'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'IntegralOrder',
  components: {
    QueryForm
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'memberName',
          type: 'input',
          label: '兑换用户',
          placeholder: '请输入兑换用户',
          clearable: true
        }, {
          filed: 'goodsName',
          type: 'input',
          label: '商品名称',
          placeholder: '请输入商品名称',
          clearable: true
        }, {
          filed: 'status',
          type: 'select',
          label: '订单状态',
          placeholder: '请选择订单状态',
          clearable: true,
          options: [
            { value: '0', label: '待取货' },
            { value: '1', label: '已取货' }
          ]
        }],
        online: true
      },
      list: [],
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},
      listLoading: true
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    fh(id) {
      const that = this
      this.$confirm('确认发货, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          integralDeliver({ param: { id }}).then(res => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('发货成功')
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    getList(page) {
      this.listLoading = false
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      integralOrder({ pagination, param: { venueId, ...filters }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>
